<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/special/imageview.css" />
		<link rel="stylesheet" type="text/css" href="../../css/special/specialdetails.css" />
	</head>

	<body>
		<div id="specialdetails" v-cloak v-show="detail">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">{{detail.title}}</h1>
				<span class="mui-pull-right collect" @tap="shareSystem"></span>
			</header>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="user_data">
						<div class="user_head"><img src="../../images/noimg.jpg" v-lazy="imgCommonUrl + detail.portraitPic" /></div>
						<div class="user_msg">
							<div>
								<div>{{detail.userName}}</div>
								<div>{{detail.issue_Date}}</div>
							</div>
						</div>
					</div>
					<div class="specialdetails">
						<div class="specialdetails_img">
							<img v-lazy="imgCommonUrl + filePath" v-for="filePath in filePath" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="specialdetails_text" v-html="detail.content">

						</div>
					</div>
					<div class="comment">
						<div class="comment_title">全部评论</div>
						<!--<div class="comment_liat">
							<div class="comment_head"><img src="http://119.23.33.223:3004/photoserver/photoserver/photo/2017/10/20/7ae7b984-2456-4f8f-b46c-47e3869ccc9f.jpg" /></div>
							<div class="comment_data">
								<div class="comment_name">乌拉拉</div>
								<div class="comment_text">所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所</div>
								<div class="comment_time">2018-03-20 12:60</div>
							</div>
						</div>-->
						<div class="comment_liat" v-for="commentList in commentList">
							<div class="comment_head"><img src="../../images/noimg.jpg" v-lazy="imgCommonUrl + commentList.portrait_pic" /></div>
							<div class="comment_data">
								<div class="comment_name">{{commentList.nick_name}}</div>
								<div class="comment_text" v-html="commentList.content"></div>
								<div class="comment_time">{{commentList.createTime}}</div>
							</div>
						</div>

						<div></div>
					</div>
				</div>
			</div>
			<div class="footer_comment">
				<div class="comment_input" @tap="showAlertTap">
					<span><input type="text" placeholder="请输入评论内容" readonly="true"/></span>
				</div>
				<div class="zan" :class="{check :  detail.isPraise==1}" @tap="addZan(detail)"></div>
			</div>
			<!--弹出评论框-->
			<!--md_show-->
			<div class="comment_alert" :class="{md_show : showAlert}">
				<div class="md_content">
					<div class="close" @tap.stop='showAlert = false'><img src="../../images/close.png" /></div>
					<textarea name="" rows="5" placeholder="说说你的看法" v-model="val" id="seachInputs"></textarea>
					<div class="comment_publish"><button type="button" class="mui-btn mui-btn-outlined" @tap="commentPublish">确认发布</button></div>
				</div>
			</div>
			<div class="mui-backdrop"></div>
			<div class="share_alert" :class="{share_alert_show:shareAlert}">
				<div class="share_title">分享给好友</div>
				<div class="share_cls">
					<!--<div>
						<div><img src="../../images/weixin.png" /></div>
						<div>微信好友</div>
					</div>
					<div>
						<div><img src="../../images/weixin.png" /></div>
						<div>微信朋友圈</div>
					</div>
					<div>
						<div><img src="../../images/qq.png" /></div>
						<div>QQ好友</div>
					</div>-->
					<div v-for="shareList in shareList" @tap="shareListCheck(shareList)">
						<div><img :src="shareList.img" /></div>
						<div>{{shareList.title}}</div>
					</div>
				</div>
			</div>
			<div class="share_mask" @tap="shareAlert = false"></div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/libs/vue-lazyload.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var shares = null;
			mui.previewImage();

			function updateSerivces() {
				plus.share.getServices(function(s) {
					shares = {};
					for(var i in s) {
						var t = s[i];
						shares[t.id] = t;
					}
				}, function(e) {
					common.toast('获取分享服务列表失败：' + e.message);
				});
			}

			Vue.use(VueLazyload, {
				preLoad: 1.3,
				error: '../../images/loadImg/advert_one_max.png',
				loading: '../../images/loadImg/advert_one_max.png'
			});
			var details = new Vue({
				el: '#specialdetails',
				data: {
					imgCommonUrl: common.imageUrl,
					//数据
					detail: '',
					//id
					themaId: '',
					//弹窗
					showAlert: false,
					val: '',
					commentList: [],
					pageNum: 1,
					//分享弹窗
					shareAlert: false,
					shareList: [],
					filePath: [],
					shareObj: ''
				},
				methods: {
					showAlertTap: function() {
						if(!JSON.parse(localStorage.getItem('userData'))) {
							_toast = mui.toast('尚未登陆<br>点此可&nbsp;<span style="border-bottom:1px solid #fff" onclick="openFeedback();">到登陆页</span>', {
								duration: 'long',
								type: 'div'
							});
						} else {
							this.showAlert = true
							initNativeObjects();
							showSoftInput();
						}
					},
					commentPublish: function() {
						if(common.replace(details.val) == '') {
							common.toast('评论不能为空')
							return
						}
						common.ajax('/thematic/saveComment', {
							themaId: details.themaId,
							content: details.val
						}, function(data) {
							if(data.code == 1) {
								details.val = ''
								details.showAlert = false
								$('input').blur()
								details.commentList = []
								details.pageNum = 1
								mui('#pullrefresh').pullRefresh().pullupLoading();
								mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
							} else {
								if(data.resultMsg) {
									common.toast(data.resultMsg)
								}
							}
						})

					},
					//点赞
					addZan: function(detail) {
						if(details.detail.isPraise == 1) {
							return
						}
						if(!JSON.parse(localStorage.getItem('userData'))) {
							_toast = mui.toast('尚未登陆<br>点此可&nbsp;<span style="border-bottom:1px solid #fff" onclick="openFeedback();">到登陆页</span>', {
								duration: 'long',
								type: 'div'
							});
							return
						}
						common.ajax('/thematic/addZan', {
							themaId: details.themaId
						}, function(data) {
							if(data.code == 1) {
								details.detail.isPraise = 1
							} else {
								if(data.resultMsg) {
									common.toast(data.resultMsg)
								}
							}
						})
					},
					//获取分享列表
					shareSystem: function() {
						var shareBts = [];
						// 更新分享列表
						var ss = shares['weixin'];
						ss && ss.nativeClient && (shareBts.push({
								title: '微信朋友圈',
								s: ss,
								x: 'WXSceneTimeline',
								img: '../../images/penyouquan.png'
							}),
							shareBts.push({
								title: '微信好友',
								s: ss,
								x: 'WXSceneSession',
								img: '../../images/weixin.png'
							}));
						ss = shares['qq'];
						ss && ss.nativeClient && shareBts.push({
							title: 'QQ',
							s: ss,
							img: '../../images/qq.png'
						});
						details.shareList = shareBts
						if(details.shareList.length <= 0) {
							common.toast('没有可分享的APP')
						} else {
							details.shareAlert = true

						}
					},
					shareListCheck: function(data) {
						if(!data || !data.s) {
							common.toast('无效的分享服务！');
							return;
						}
						var msg = {
							content: details.detail.content,
							extra: {
								scene: data.x
							}
						};

						console.log(details.shareObj)
						msg.href = details.shareObj.shareUrl ? details.shareObj.shareUrl : 'http://www.dp218.com/';
						msg.title = details.shareObj.shareTitle;
						msg.content = details.shareObj.shareDes
						msg.thumbs = [details.imgCommonUrldetails + details.shareObj.sharePic];
						msg.pictures = [details.imgCommonUrldetails + details.shareObj.sharePic];
						//						if(data.s.authenticated) {
						data.s.send(msg, function() {
							details.shareAlert = false
							console.log('分享到"' + data.s.description + '"成功！');
							mui.back()
						}, function(e) {
							console.log('分享到"' + data.s.description + '"失败: ' + JSON.stringify(e));
							//								common.toast('分享失败')
						});
						//						} else {
						//							common.toast('---未授权---')
						//						}
					}
				}
			})

			mui.plusReady(function() {
				updateSerivces();
				var self = plus.webview.currentWebview();
				details.themaId = self.parameter
				console.log(details.themaId)
				//			details.themaId = 't6GnKnEs'
				if(mui.os.plus) {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
					}, 10);
				} else {
					mui.ready(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
					});
				}
				common.ajax('/thematic/info/' + details.themaId, {}, function(data) {
					if(data.code == 1) {
						details.detail = data.data.detail
						console.log(data.data)
						details.shareObj = data.data.shareObj
						details.filePath = data.data.detail.filePath.split(',')
					} else {
						if(data.resultMsg) {
							common.toast(data.resultMsg)
						}
					}
				}, false, 'get')
			})

			function pullupRefresh() {
				common.ajax('/thematic/comment/query/' + details.themaId, {
					curPageNO: details.pageNum++
				}, function(data) {
					//					console.log(data)
					if(data.code == 1) {
						details.commentList = details.commentList.concat(data.data.list)

						if(data.data.pageCount < details.pageNum) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //参数为true代表没有更多数据了。
						}
					} else {
						if(data.resultMsg) {
							common.toast(data.resultMsg)
						}
					}
				}, true, 'get')

			}

			var back = mui.back
			mui.back = function() {
				if(details.showAlert) {
					details.showAlert = false
				} else if(details.shareAlert) {
					details.shareAlert = false
				} else {
					back()
				}
			}
			//弹出键盘
			var nativeWebview, imm, InputMethodManager;
			var initNativeObjects = function() {
				if(mui.os.android) {
					var main = plus.android.runtimeMainActivity();
					var Context = plus.android.importClass("android.content.Context");
					InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
					imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
				} else {
					nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
				}
			};
			var showSoftInput = function() {
				if(mui.os.android) {
					imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
				} else {
					nativeWebview.plusCallMethod({
						"setKeyboardDisplayRequiresUserAction": false
					});
				}
				setTimeout(function() {
					var inputElem = document.getElementById('seachInputs');
					inputElem.focus();
				}, 200);
			};

			function openFeedback() {
				plus.webview.open('../login/login.html', '../login/login.html', {}, 'slide-in-right')
			}
		</script>
	</body>

</html>